No puedo cambiar ningún borde de propiedad de estilo, color, etc., ¿por qué? siempre obtengo:
TypeError no capturado: no se puede acceder a la propiedad "color", icon.style no está definido
<!-- this element is created multipleTimes by loop --> <li class="list-group-item"> <span> <input class="input_Text" data-verb="<%= data %>" type="text"> <i class="fas fa-check checkIcon" ></i> </span> </li> let check = document.querySelectorAll('.input_Text')/* AQUÍ */
var icono = documento.querySelectorAll('.checkIcon');
check.forEach(element => element.addEventListener('input',(e)=>{ var data = element.getAttribute('data-verb').toString(); var value = e.target.value; if (value == ""){ element.style.border = "1px solid blue"; element.style.color = "black"; } else if (data.startsWith(value)){ element.style.border = "5px solid green"; element.style.color = "green"; } else{ element.style.border = "5px solid red"; element.style.color = "red"; } <!-- HERE --> value == data?icon.style.color = "green" : null; }));Esto se debe a que el icon querySelectorAll no es el elemento en sí mismo (consulte a continuación cómo devolver el elemento único).
Devuelve un NodeList que es bastante similar a un Array. Para hacer lo que quiere, necesita obtener el primer nodo devuelto por esta lista. Algunas formas de hacer esto:
// Deconstructing it as an array, I'm not sure if you can really do this with a NodeList, should be tested var [icon] = document.querySelectorAll('.checkIcon'); // Get item x where x is the index (in your case, 0, the first element) var icon = document.querySelectorAll('.checkIcon').item(0); // This is valid syntax, same as .item() var icon = document.querySelectorAll('.checkIcon')[0];Obtener el elemento único en sí
Alternativamente, como se indica en los comentarios de esta respuesta, puede elegir directamente el elemento usando la API .querySelector() de Document
Referencias: